<template>
  <!-- 顶部导航栏 - 优化版 -->
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    :ellipsis="false"
    class="main-nav"
    :router="true"
    @select="handleMenuSelect"
  >
    <!-- 左侧Logo -->
    <div class="nav-brand">
      <img class="brand-logo" src="@/assets/logo.png" alt="智慧教培" />
      <h1 class="brand-title">智慧教培</h1>
    </div>

    <!-- 右侧导航区 -->
    <div class="nav-end">
      <!-- 自动填充剩余空间 -->
      <div class="flex-grow" />

      <!-- 导航菜单项 -->
      <el-menu-item index="/" class="nav-item">首页</el-menu-item>
      <el-menu-item index="/notice" class="nav-item">网站公告</el-menu-item>

      <!-- 用户相关 -->
      <template v-if="token">
        <el-menu-item index="/personalcenter" class="nav-item">个人中心</el-menu-item>
        <el-menu-item class="nav-item" @click="handleLogout">退出系统</el-menu-item>
      </template>
      <el-menu-item v-else index="/login" class="nav-item">登录注册</el-menu-item>

      <!-- 用户头像 -->
      <el-avatar
        class="user-avatar"
        :size="36"
        :src="$route.path === '/personalcenter' ? userStore.avatar : '@/assets/avatar-default.png'"
        @click="$router.push('/personalcenter')"
      />
    </div>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const {token} = userStore

// 计算当前激活菜单（处理路由参数情况）
const activeMenu = computed(() => {
  const path = route.path
  return path === '/' ? path : `/${path.split('/')[1]}`
})

// 处理菜单点击
const handleMenuSelect = (index: string) => {
  console.log('导航到:', index)
}

// 退出登录
const handleLogout = () => {
  userStore.resetToken()
  router.replace('/login').then(() => window.location.reload())
}
</script>

<style lang="scss" scoped>
@use '@/assets/scss/variables' as *;

.main-nav {
  height: 64px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(135deg, $primary-color 0%, mix($primary-color, #000, 85%) 100%);
  box-shadow: $box-shadow-lg;
  transition: all 0.3s ease;

  .nav-brand {
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    
    .brand-logo {
      height: 40px;
      margin-right: 12px;
      transition: transform 0.3s;
      
      &:hover {
        transform: rotate(-8deg);
      }
    }

    .brand-title {
      margin: 0;
      color: white;
      font-size: 24px;
      font-weight: 600;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
  }

  .nav-end {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .flex-grow {
    flex-grow: 1;
  }

  // 导航菜单项样式
:deep(.el-menu-item) {
  position: relative;
  height: 64px;
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent !important;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    
    &::after {
      width: 100%;
      left: 0;
    }
  }

  &.is-active {
    color: #fff !important;
    font-weight: 600;
    background: transparent !important;

    &::after {
      width: 100%;
      left: 0;
      background: $color-warning;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.15) !important;
    }
  }
}

  .user-avatar {
    margin-left: 20px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: $shadow-sm;

    &:hover {
      transform: scale(1.08);
      box-shadow: $shadow-md;
    }
  }
}
</style>